<template>
	<view class="container">
		<view class="time-box" @click="timePicker = true">
			<text class="time">{{ query.timeDate }}</text>
			<text class="iconfont icon-down"></text>
			<u-picker
				mode="time"
				v-model="timePicker"
				:default-time="query.timeDate"
				:params="params"
				title="选择年月"
				@confirm="pickerConfirmHandle"
				start-year="2021"
				@cancel="timePicker = false"
				confirm-color="#4888FB"
			/>
		</view>
		<view class="data-box">
			<view class="item" v-for="(item, i) in dataList" :key="i">
				<view class="title flex-space-between">
					<text class="left">
						{{ item.title }}{{ item.total }}
						<text @click="showTip(i)" class="iconfont icon-bangzhu1"></text>
					</text>
				</view>
				<view class="content flex">
					<view class="tag flex-column" v-for="(itemC, i) in item.tagList" :key="i">
						<text class="value">{{ toFixedNum(itemC.amount) }}</text>
						<text class="name">{{ itemC.walletName }}</text>
					</view>
				</view>
				<view class="line" :style="{ background: item.bgColor }"></view>
			</view>
		</view>

		<view class="e-content">
			<view class="line" style="background: #f8c781"></view>

			<view class="filter flex-space-between">
				<view class="type">
					<u-tabs active-color="#4286F5" :list="echartNavType" :is-scroll="false" bg-color="transparent" :current="navIndex1" @change="changeNav($event, 1)"></u-tabs>
					<!-- <text v-for="(item, i) in echartNavType" :key="i" class="">{{item.text}}</text> -->
				</view>
				<view class="brand" @click.stop="changeEChartType">
					{{ typeFilterList[eChartType].dictLabel }}
					<text class="iconfont icon-xiajiantou"></text>
				</view>
			</view>
			<view class="echart">
				<qiun-data-charts v-if="line1Data.series[0].data.length > 0" :opts="line.opts" type="area" :chartData="line1Data" />
				<div class="timeType flex-center">
					<text v-for="(item, i) in timeType" :key="i" @click.stop="timeChange(1, item, i)" :class="{ active: timeActive1 == i }">{{ item.name }}</text>
				</div>
			</view>
		</view>
		<view class="e-content f-active">
			<view class="line" style="background: #68a7e1"></view>
			<view class="filter flex-space-between"><view class="brand">伪激活扣款情况：</view></view>
			<view class="title-data flex-space-between">
				<view class="tag flex-column" v-for="(item, i) in fActiveList" :key="i">
					<text class="value">{{ item.value }}</text>
					<text class="name">{{ item.name }}</text>
				</view>
			</view>

			<view class="echart">
				<qiun-data-charts v-if="line2Data.series[0].data.length > 0" :opts="line.opts" type="area" :chartData="line2Data" />
				<div class="timeType flex-center">
					<text v-for="(item, i) in timeType" view :key="i" @click.stop="timeChange(2, item, i)" :class="{ active: timeActive2 == i }">{{ item.name }}</text>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
import { formDateToString, getNowMonthNoDate, getCurrentMonthLast } from '_c/utils/date';
import { totalIncomeIndex, totalIncomeDetail, addDetail } from '_a/data/earnings';
export default {
	data() {
		return {
			query: {
				timeDate: getNowMonthNoDate(new Date())
			},
			timePicker: false,
			echartNavType: [{ name: '直属团队', value: '0' }, { name: '团队', value: '1' }, { name: '本人', value: '2' }],
			params: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false
			},
			timeType: [{ name: '按日', value: '0' }, { name: '按月', value: '1' }, { name: '近一周', value: '2' }],
			line: {
				opts: {
					color: ['#1890FF'],
					dataPointShapeType: 'hollow',
					legend: {
						show: false
					},
					xAxis: {
						labelCount: 8
					},
					fontSize: '12',
					yAxis: {
						gridType: 'dash',
						dashLength: 2
					},
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true
						}
					}
				}
			},
			line1Data: {
				categories: [],
				series: [
					{
						name: '数据',
						data: []
					}
				]
			},
			line2Data: {
				categories: [],
				series: [
					{
						name: '数据',
						data: []
					}
				]
			},

			navIndex1: 0,
			navIndex2: 0,
			timeActive1: 0, //时间下标
			timeActive2: 0, //时间下标
			eChartType: 0, //折线图筛选下标
			dataList: [
				{
					title: '当月总收入(元)：',
					total: '0',
					bgColor: '#FF628F',
					tagList: [
						{ name: '当月总分润(元)', value: 0, key: 'o' },
						{ name: '达标奖励(元)', value: 10, key: 'o' },
						{ name: '通讯费奖励(元)', value: 42, key: 'o' },
						{ name: '押金返现(元)', value: 148, key: 'o' },
						{ name: '激活奖励(元)', value: 342, key: 'o' },
						{ name: '提现分润(元)', value: 442, key: 'o' }
					]
				},
				{
					title: '我的收入(本级)(元)：',
					total: '0',
					bgColor: '#29D382',
					tagList: [
						{ name: '当月总分润(元)', value: 0, key: 'o' },
						{ name: '达标奖励(元)', value: 10, key: 'o' },
						{ name: '通讯费奖励(元)', value: 42, key: 'o' },
						{ name: '押金返现(元)', value: 148, key: 'o' },
						{ name: '激活奖励(元)', value: 342, key: 'o' },
						{ name: '提现分润(元)', value: 442, key: 'o' }
					]
				},
				{
					title: '直属团队收入：',
					total: '0',
					bgColor: '#C474E1',
					tagList: [
						{ name: '当月总分润(元)', value: 0, key: 'o' },
						{ name: '达标奖励(元)', value: 10, key: 'o' },
						{ name: '通讯费奖励(元)', value: 42, key: 'o' },
						{ name: '押金返现(元)', value: 148, key: 'o' },
						{ name: '激活奖励(元)', value: 342, key: 'o' },
						{ name: '提现分润(元)', value: 442, key: 'o' }
					]
				}
			],
			typeFilterList: [],
			tipText: '',
			fActiveList: [{ name: '当月总扣款(元)', value: 0, key: '0' }, { name: '我的扣款(元)', value: 40, key: '0' }, { name: '直属团队扣款(元)', value: 0, key: '0' }]
		};
	},
	async onPullDownRefresh() {
		await this.initData();
		uni.stopPullDownRefresh();
		this.$tip.toast('刷新成功!', 'success', 500);
	},

	onLoad() {
		let list = JSON.parse(JSON.stringify(this.$store.getters.balanceList));
		// list.unshift({ dictLabel: '全部', dictValue: '' });
		this.typeFilterList = list;
		this.initData();
	},
	methods: {
		async initData() {
			// this.ringData.series[0].data = [];
			this.line1Data.series[0].data = [];
			this.line2Data.series[0].data = [];
			await this.getEchartData1();
			await this.getEchartData2();
			await this.getTotal();
		},
		// 获取数据
		getTotal() {
			// 本人
			totalIncomeIndex({
				policyCode: this.query.policyCode,
				mon: this.query.timeDate
			}).then(res => {
				if (res.code == 200) {
					let data = res.data;
					// 头部上的数据
					// 个人
					this.dataList[0].tagList = data.team;
					this.dataList[0].total = data.totalAmountByTeam;
					//
					this.dataList[1].tagList = data.oneself;
					this.dataList[1].total = data.totalAmountByOneSelf;

					this.dataList[2].tagList = data.under;
					this.dataList[2].total = data.totalAmountByUnder;
					// this.addMerchDetail = data.addMerchDetail;
					// this.merchDetailByTeam = data.merchDetailByTeam;
				}
			});
		},
		// 格式化请求赋值参数
		formData(list, data) {
			list = list.map(subItem => {
				subItem.value = data[subItem.key];
				return subItem;
			});
			return list;
		},
		changeEChartType() {
			uni.showActionSheet({
				itemList: this.typeFilterList.map(item => item.dictLabel),
				success: res => {
					this.eChartType = res.tapIndex;
					this.getEchartData1();
					console.log(res);
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
		},
		pickerConfirmHandle(item) {
			console.log(item);
			this.query.timeDate = item.year + '-' + item.month;
			this.getTotal();
			this.timePicker = false;
		},
		changeNav(i, type) {
			// console.log(type, i);
			switch (type) {
				case 1:
					this.navIndex1 = i;
					this.getEchartData1();
					break;
				case 2:
					this.navIndex2 = i;
					this.getEchartData2();
					break;
				case 3:
					this.navIndex3 = i;
					this.getEchartData3();
					break;
				default:
					break;
			}
		},
		timeChange(key, item, i) {
			switch (key) {
				case 1:
					this.timeActive1 = i;
					this.getEchartData1();
					break;
				case 2:
					this.timeActive2 = i;
					this.getEchartData2();
					break;
				case 3:
					this.timeActive3 = i;
					this.getEchartData3();
					break;
				default:
					break;
			}
		},
		getEchartData1() {
			totalIncomeDetail({
				agentType: this.echartNavType[this.navIndex1].value,
				queryDateType: this.timeType[this.timeActive1].value,
				policyCode: this.query.policyCode,
				walletType: this.typeFilterList[this.eChartType].dictValue
			}).then(res => {
				if (res.code == 200) {
					let line = res.data;
					this.line1Data.categories = line.map(item => {
						item = item.transDate.slice(-2);
						return item;
					});
					// console.log(this.line1Data);
					this.line1Data.series[0].data = line.map(item => item.totalAmount);
				}
			});
		},
		getEchartData2() {
			addDetail({
				agentType: this.echartNavType[this.navIndex2].value,
				queryDateType: this.timeType[this.timeActive2].value,
				policyCode: this.query.policyCode
			}).then(res => {
				if (res.code == 200) {
					let line = res.data.detail;
					this.line2Data.categories = line.map(item => {
						item = item.transDate.slice(-2);
						return item;
					});
					// console.log(this.line2Data);
					this.line2Data.series[0].data = line.map(item => item.totalAmount);
					this.fActiveList[0].value = res.data.dedAmountByTeam;
					this.fActiveList[1].value = res.data.dedAmountByOneSelf;
					this.fActiveList[2].value = res.data.dedAmountByUnder;
				}
			});
		},
		// 提示
		showTip(type) {
			console.log(123);
			switch (type) {
				case 'today':
					this.$tip.toast('该功能统计本人及直属下级团队数据的新增商户数');
					break;
				case 'team':
					this.$tip.toast('该功能统计本人及直属下级团队数据的新增商户数');
					break;
				default:
					break;
			}
		},
		// 跳转全部
		toDetail(type) {
			url = '';
			switch (type) {
				case 'today':
					url = '/';
					break;
				case 'team':
					url = '/';
					break;
				default:
					break;
			}
			this.$nav.push({ path: url });
		}
	}
};
</script>

<style lang="scss">
.time-box {
	padding-left: R(22);
}
.container {
	padding-bottom: R(50);
	padding-top: R(28);
}
.data-box {
	margin: R(0) R(25) 0;
	> view {
		margin-top: R(24);
		padding: R(24) R(22);
		background: #ffffff;
		border-radius: R(20px);
		box-shadow: 0px R(17px) R(16px) 0px rgba(11, 51, 116, 0.19);
	}
	.item {
		position: relative;
		overflow: hidden;
		.line {
			position: absolute;
			left: 0;
			top: R(0);
			width: R(8);
			height: R(73);
			border-radius: R(10);
		}
		.content {
			flex-wrap: wrap;
			padding: R(0) R(22) R(10);
			.tag {
				width: 48%;
				text-align: left;
				margin-top: R(30);
				.value {
					font-size: R(36);
					font-weight: 500;
					color: #000000;
				}
				.name {
					font-size: R(26);
					font-weight: 500;
					color: #666;
				}
			}
		}
		.title {
			align-items: center;
			margin-bottom: R(10);
			font-weight: bold;
			.icon-bangzhu1 {
				color: #3494d7;
			}
		}
	}
	.team {
	}
}

.e-content {
	padding: R(6) R(25) R(10);
	margin: R(32) R(25) 0;
	height: R(601px);
	background: #ffffff;
	box-shadow: 0px R(17px) R(16px) 0px rgba(11, 51, 116, 0.19);
	border-radius: R(20px);
	position: relative;
	.line {
		position: absolute;
		left: 0;
		top: R(0);
		width: R(8);
		height: R(73);
		border-radius: R(10);
	}
	.filter {
		font-size: R(28px);
		font-weight: 400;
		color: #000000;
		margin-bottom: R(20);
		.type {
			width: R(400);
		}
		.brand {
			font-size: R(24);
			.icon-xiajiantou {
				font-size: R(24);
			}
		}
	}
	.title-data {
		padding: R(0) R(42) R(10);
		white-space: nowrap;
		.tag {
			width: 33%;
			text-align: left;
			margin-top: R(30);
			.value {
				font-size: R(36);
				font-weight: 500;
				color: #000000;
			}
			.name {
				font-size: R(26);
				font-weight: 500;
				color: #666;
			}
		}
	}
	.echart {
		width: 100%;
		height: 190px;
	}
	.timeType {
		margin-top: R(20);
		text:nth-child(2) {
			margin: 0 R(16) 0 R(16);
		}
		text {
			width: R(147);
			height: R(60);
			line-height: R(60);
			text-align: center;
			background: #fafafa;
			border-radius: R(30);
		}
		.active {
			background: #cee1ff;
			color: #4286f5;
		}
	}
}
.f-active {
	height: R(671px);
	.brand {
		font-size: R(28);
		font-weight: bold;
		color: #1a1a1a;
	}
}
</style>
